<template>
	<view>
     <image src="../../static/img/loginBg.png" mode="widthFix" class="bgimgBox"></image>
     <view class="logo">
     	<view class="img"><image src="../../static/img/category/05.png" mode="widthFix"></image></view>
     </view>
		<view class="form re">
			<view class="username">
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{i18n.verificationCode}}</view>
				<input :placeholder="i18n.enterCommonlyUsedPhoneNumber" v-model="phoneNumber" />
			</view>
			<view class="code">
				<input :placeholder="i18n.enterCommonlyUsedVerificationCode" v-model="code" />
			</view>
			<view class="password">
				<input :placeholder="i18n.pleaseInputPassword" v-model="passwd" password=true />
			</view>
			<view class="btn" @tap="doReset">{{i18n.resetPassword}}</view>
		<view @click="changeLangEvent">切换</view>
		</view>
		
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	export default {
		computed: {
			i18n() {
				return this.$t('userbinding')
			}
		},
		data() {
			return {
				phoneNumber:"",
				code:'',
				passwd:"",
				getCodeText:'获取验证码',
				getCodeBtnColor:"#be9d6b",
				getCodeisWaiting:false
			}
		},
		onLoad() {

		},
		methods: {
			Timer(){},
			getCode(){
				if(this.getCodeisWaiting){
					return ;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;		
				this.getCodeBtnColor = 'rgba(255, 74, 0, 0.5)';
				//示例用定时器模拟请求效果
				setTimeout(()=>{
					uni.showToast({title: '验证码已发送',icon:"none"});
					//示例默认1234，生产中请删除这一句。
					this.code=1234;
					this.setTimer();
				},1000)
				
				
			},
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#be9d6b";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
					
				},1000)
			},
			doReset(){
				uni.hideKeyboard()
				//模板示例部分验证规则
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 

				//示例验证码，实际使用中应为请求服务器比对验证码是否正确。
				if(this.code!=1234){ 
					uni.showToast({title: '验证码不正确',icon:"none"});
					return false; 
				}
				uni.showLoading({
					title: '提交中...'
				})
				//模板示例修改本地储存的用户信息，实际使用中请替换为上传服务器修改。
				setTimeout(()=>{
					uni.getStorage({
						key: 'UserList',
						success: (res)=>{
							uni.hideLoading()
							for(let i in res.data){
								let row = res.data[i];
								if(row.username==this.phoneNumber){
									//修改记录，密码md5
									res.data[i].passwd = md5(this.passwd);
									uni.setStorage({
										key: 'UserList',
										data: res.data,
										success: function () {
											uni.showToast({title: '密码已重置',icon:"success"});
											setTimeout(()=>{
												uni.navigateBack();
											},1000)
										}
									});
									return ;
								}
							}
							uni.showToast({title: '手机号码未注册',icon:"none"});
							
						},
						fail:function(e){
							uni.hideLoading()
							uni.showToast({title: '手机号码未注册',icon:"none"});
						}
					});
				},1000)
				
				
			},
			/**
			 * 切换语言 
			 */
			changeLangEvent() {
				var that = this
				uni.showModal({
					content: '是否切换语言',
					success: function(res) {
						if (res.confirm) {
							console.log(that)
							if (that.lang === 'zh-CN') {
								that.lang = 'en-US';
								that.$i18n.locale = that.lang; //关键语句
								that.setEN()
							} else {
								that.lang = 'zh-CN';
								that.$i18n.locale = that.lang; //关键语句
								that.setZH()
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss";

	
</style>
